<script setup lang="ts">
import {computed, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const route = useRoute()
const activeMenu = ref(route.path)
const layoutRoutes = computed(() => {
  const router = useRouter();
  const layout = router.getRoutes().find(route => route.path === "/adminDashboard");

  // 如果 layout 或 layout.children 不存在，返回空数组
  if (!layout?.children) return [];

  // 深拷贝 layout.children 并移除 children 属性
  return layout.children.map(route => ({
    ...route,
    children: route.children ? [...route.children] : undefined,
  }));
});
</script>

<template>
  <el-container class="home-container">
    <el-aside class="home-aside">
      <el-menu
        :default-active="activeMenu"
        :router="true"
        unique-opened
        background-color="#f0f2f5"
        class="el-menu">
        <template v-for="route in layoutRoutes">
          <!-- 如果有 children，用 el-sub-menu -->
          <el-sub-menu v-if="route.children && route.children.length > 0" :index="route.path">
            <template #title>
              <span>{{ route.meta.title }}</span>
            </template>
            <!-- 遍历子菜单 -->
            <el-menu-item v-for="child in route.children" :key="child.path" :index="child.path">
              <span>{{ child.meta.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 如果没有 children，用 el-menu-item -->
          <el-menu-item v-else :key="route.path" :index="route.path">
            <span>{{ route.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<style scoped>
/* 主容器样式 */
.home-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.home-aside {
  width: 180px;
  background-color: #f0f2f5;
  text-align: center;
  font-weight: 550;
  border-right: 1px solid #f3f3f3;
}

.el-menu {
  border-right: none;
}
</style>
